<template>
	<view class="listsp">
		<u-radio-group v-model="radioMarketId" @change="radioChange">
			<view 
				 @click.stop="jump(url)"
				 class="listitem"
				v-for="item in 4" :key='item'>
				<u-radio 
				   :active-color="lightColor" 
					label-size="25" 
					shape="circle" 
					iconSize='24'
					class="listfourradio"
					:name="item">
				<view  class="flex-row-between font15 content">
					2024年07月物业费
					<view class="yellow">
						¥0
						<u-icon name='arrow-right' color='#666' class="arrright" v-if='item == 2'></u-icon>
					</view>
				</view>
				<view class="content color9" v-if='item == 2'>缴费时间: 2024-08-08 12:30</view>
			</u-radio>
			</view>
		</u-radio-group>
		</view>
	</view>
</template>

<script>
	export default {
		props:['bg','title','url'],
		data(){
			return {
				radioMarketId:[],
				List:[],
				lightColor:'#499C43',
			}
		},
		methods:{
			jump(res){
				uni.navigateTo({
					url: res
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.listitem{
		border-radius: 12px;
		overflow: hidden;
		margin-bottom: 10px;
		overflow: hidden;
		background-color: #fff;
		padding: 12px;
		width: 100%;
	}
	.arrright{
		margin-left: 5px;
	}
	.tip{
		background-color: #DDF3EC;
		width: 52px;
		line-height: 24px;
		border-radius: 6px;
		color: #0DC283;
		margin-left: 8px;
		text-align: center;
	}
	.baoxiu{
		background-color: #F4F6F8;
		display: inline-block;
		padding: 2px 7px;
		border-radius: 10px;
		color: #999999;
		margin-right: 10px;
	}
	.top{
		padding-bottom: 10px;
		border-bottom: 1px solid #DDDDDD60;
	}
	.smallinfo{
		padding-top: 10px;
	}
	.content{
		margin-left: 6px;
	}
</style>